<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    :title="title"
    :visible.sync="open"
    append-to-body
    width="30%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <hk-form
      ref="hkFormRef"
      :form-labels="formLabels"
      :rules="formRules"
      :data="formData"
      :btn-hidden="true"
      :dict-list="dictList"
      label-width="120"
      label-position="left"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import HkForm from '@/components/HkForm/index.vue'
import { getNextNodeInfo } from '@/api/workbench/workbenchList.js'
export default {
  components: { HkForm },
  data() {
    return {
      open: false,
      title: '选择处理人',
      formLabels: [],
      defaultLabels: [
        {
          label: '运维主管',
          field: 'targetUserId',
          type: 'select',
          list: 'nameLists',
          span: 24,
          class: 'showUser',
          attrs: {
            placeholder: '请选择处理人'
          }
        }
      ],
      dictList: {
        nameLists: []
      },
      formRules: {
        // remark: [{ required: true, message: '评论不能为空', trigger: 'blur' }]
      },
      formData: {}
    }
  },
  methods: {
    show(title, res, taskKey) {
      this.open = true
      this.title = title
      this.setFormLabels(res)
    },
    cancel() {
      this.open = false
      this.formData = {}
      this.$emit('handleCancel')
    },
    handleSubmit() {
      this.$emit('handleSubmit', this.formData)
      this.open = false
      this.formData = {}
    },
    //  设置表单显示项
    setFormLabels(res) {
      this.formLabels = this.defaultLabels
      this.formLabels[0].label = res[0].name
      this.formLabels[0].field = res[0].id

      if (res[0]?.userProfileDtos.length > 0) {
        this.dictList.nameLists = res[0].userProfileDtos.map((i) => {
          return { label: i.name, value: i.id }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 20px;
  font-weight: bold;
  i {
    font-size: 18px;
    color: #fa541c;
  }
}
.btn {
  text-align: right;
  padding-top: 20px;
}
</style>
